<template>
	<view>
		<view class="page-body">
			<view class="page-section">
				<view class="top">
					<searchTemp class="search" @childByValue="childByValue"></searchTemp>
				</view>
				<view class="tiaojian">
					<view :class="id==item.id?'active':''" v-for="item in xuanze" :key="item.id" @click="fresh(item.id)">
						{{item.item}}
					</view>

				</view>
				<view class="product-box">
					<view class="product-item" @click="toProduct(item)" v-for="(item,index) in productList">
						<view class="product-title">
							{{item.productName}}
							<view class="btn zaishouzhong" v-if="item.status==2">在售中</view>
							<view class="btn yixiaxian" v-if="item.status==3">已下线</view>
						</view>
						<view class="product-detail">
							<view class="item-left">

								<view class="large-size color" >
									{{item.yield}}
								</view>
								<view class="">
									业绩比较基准
								</view>
								<view class="" v-if="loginRole==3">
									预约人数 {{item.custCnt}}人
								</view>
							</view>

							<view class="item-right">
								<view class="item-right-inside">
									<view class="item">
									
										产品期限
									
										<label class="color1" v-html="item.deadline">
											12个月
										</label>
									</view>
									<view class="item">
									
										认购起点
									
										<label class="color1" v-html="item.perminBalance">
											50万元
										</label>
									</view>
									<view class="item" v-if="loginRole==3">
									
										剩余金额
									
										<label class="color1" v-html="item.leftScale">
											50万元
										</label>
									
									</view>
								</view>
							</view>
						</view>
					</view>
					<!-- 		<view class="product-item" @click="toProduct">
						<view class="product-title">
							秀实——东雀嘉熠一号收益权转让计划
							<view class="btn yixiaxian">已下线</view>
						</view>
						<view class="product-detail">
							<view class="item-left">
								
									<view class="large-size color">
										8%-9.5%
									</view>
									<view class="">
										业绩比较基准
									</view>
									<view class="">
										预约人数 3人
									</view>
								

							</view>

							<view class="item-right">
								<view class="item">
										产品期限
									<label class="color1">
										12个月
									</label>
								</view>
								<view class="item">
									
										认购起点
									
									<label class="color1">
										50万元
									</label>
								</view>
								<view class="item">
										剩余金额
									
									<label class="color1">
										50万元
									</label>

								</view>

							</view>
						</view>
					</view>
			 -->
				</view>
				<uni-load-more :loadingType="loadingType" :contentText="contentText"></uni-load-more>
			</view>
		</view>
	</view>
</template>
<script>
	var _self, page = 1,
		timer = null;
	import searchTemp from '../../components/search-temp'
	import uniLoadMore from '../../components/uni-load-more'
	//引入全局变量
	import global_ from '../../components/tool/Global'
	export default {
		components: {
			searchTemp,
			uniLoadMore,
			global_
		},
		data() {
			return {
				id: 1,
				bind: true, // 可以点击
				xuanze: [{
					item: "全部",
					id: 1
				}, {
					item: "业绩基准",
					id: 2
				}, {
					item: "投资期限",
					id: 3
				}, {
					item: "起投金额",
					id: 4
				}],
				productList: [],
				loadingType: 0,
				contentText: {
					contentdown: "上拉显示更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多数据了"
				},
				url: global_.api.queryProductAllUrl,
				productName: '',
				loginRole:'',
				searchValue:''  //通过子组件获取input输入值

			}
		},
		onReady: function(res) {
			//监听页面初次渲染完成 
		},
		onLoad() {
			uni.setStorageSync('searchPlaceholderText','请输入产品名称');
			
			
			_self = this;
			//从缓存中获取登录用户角色
			var userInfo = uni.getStorageSync('userinfo_key');
			if ('' != userInfo && null != userInfo) {
				console.log("登录信息：=========="+JSON.stringify(userInfo))
				var role = userInfo.loginRole;
				this.loginRole = role;
			}
			//监听页面加载，其参数为上个页面传递的数据
			//判断当前登录用户的身份
			if (this.loginRole == 3) {
				this.url = global_.api.queryProductAllUrl2;
			} else {
				this.url = global_.api.queryProductAllUrl;
			}
			
			this.getData();
		},
		onShow() {
			console.log('onShow====product 重新刷新product页')
		},
		onPullDownRefresh: function() {
			console.log("下拉刷新。。。。。")
			//下拉刷新
			this.getData();
		},
		onReachBottom: function() {
			//上拉获取更多
			this.getMoreProjectList();
		},
		methods: {
			getData() {
				console.log("数据开始加载。。。。。。。。。。。。。。。。。。。。。。。。。");
				console.log("page==" + page + ",productName==" + _self.productName+",url="+_self.url);
				page = 1;
				uni.showNavigationBarLoading();
				uni.request({
					method: 'POST',
					url: _self.url,
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						pageNow: page,
						productName: _self.productName
					},

					dataType: 'json',
					success: (res) => {
						this.productList = res.data.data;
						console.log(JSON.stringify(this.productList))
						if(this.productList.length==0){
							this.contentText.contentdown='没有更多数据了';
						}

					},
					fail: (res) => {
						console.log("fail");
						//console.log(res.data);
						//this.text = 'request fail';
					},
					complete: (res) => {
						//停止当前页面下拉刷新。
						uni.hideNavigationBarLoading();
						uni.stopPullDownRefresh();
						console.log("第" + page + "页数据加载完成========共加载" + this.productList.length + "条");
					}
				});


			},
			getMoreProjectList: function() {
				if(_self.loadingType==2){
					this.contentText.contentdown='没有更多数据了';
				}
				//本次加载没有完成，禁止继续下拉
				if (this.loadingType !== 0) {
					return;
				}
				
				//设置状态为加载中。。。
				this.loadingType = 1;
				page++;
				uni.showNavigationBarLoading();
				uni.request({
					url: _self.url,
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					dataType: 'json',
					data: {
						pageNow: page,
						productName: this.productName
					},
					success: function(res) {
						//console.info("第"+page+"数据为"+JSON.stringify(res.data.data));
						console.log("第" + page + '页共加载' + res.data.data.length + "条数据")
						//没有更多数据了,2种情况会存在没有更多数据，1是最后一页数据不足每页显示的条数，2是最后一页刚好没数据
						if (res.data.data.length == 0) {
							_self.loadingType = 2;
							return;
						}
						//将本次获取到的数据追加到列表中
						_self.productList = _self.productList.concat(res.data.data);

						if (res.data.data.length != 10) {
							_self.loadingType = 2;
							return;
						}
						
						//设置状态，可以继续下拉加载更多
						_self.loadingType = 0;

					},
					complete: function(res) {
						uni.hideNavigationBarLoading();

					}
				});


			},
			toProduct(param) {
				var pkId=param.pkId;
				console.log('-------------'+param.status);
				uni.setStorageSync('product_status', param.status);
				var value=param.yield;//业绩比较基准
				console.log("param==="+value+"end")
				var deadline=param.deadline;//产品期限
				var perminBalance=param.perminBalance;//认购起点
				var myUrl='./productYemian/productYemian?pkId='+pkId+"&yield="+param.yield+"&deadline="+deadline+"&perminBalance="+perminBalance;
				uni.setStorageSync('productBaseInfo',param);
					uni.navigateTo({
						url: './productYemian/productYemian',
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
			},
			fresh(id) {
				this.id = id;
				var userInfo = uni.getStorageSync('userinfo_key');
				if ('' != userInfo && null != userInfo) {
					console.log("登录信息：=========="+JSON.stringify(userInfo))
					var role = userInfo.loginRole;
					this.loginRole = role;
				
				}
				console.log("fresh.........." + id + ",loginRole=============" + this.loginRole + ",url==" + this.url);
				//this.productName=productName;
				if (id == 1) {
					//判断当前登录用户的身份
					if (this.loginRole == 3) {
						this.url = global_.api.queryProductAllUrl2;
					} else {
						this.url = global_.api.queryProductAllUrl;
					}
					this.getData(); //加载全部
				}
				if (id == 2) {
					//业绩基准
					//判断当前登录用户的身份
					if (this.loginRole == 3) {
						this.url = global_.api.queryProductByYeJiJiZhuiUrl2;
					} else {
						this.url = global_.api.queryProductByYeJiJiZhuiUrl;
					}
					this.getData();
				}
				if (id == 3) {
					//投资期限
					//判断当前登录用户的身份
					if (this.loginRole == 3) {
						this.url = global_.api.queryProductByTouZiQiXianUrl2;
					} else {
						this.url = global_.api.queryProductByTouZiQiXianUrl;
					}

					this.getData();
				}
				if (id == 4) {
					//起投金额
					if (this.loginRole == 3) {
						this.url = global_.api.queryProductByQiTouJinErUrl2;
					} else {
						this.url = global_.api.queryProductByQiTouJinErUrl;
					}
					this.getData();
				}

			},
			childByValue: function(childValue) {
				// childValue就是子组件传过来的值
				this.searchValue = childValue
				console.log("this.searchValue---"+this.searchValue);
				this.productName=childValue;
				this.fresh(this.id);
			}

		}
	}
</script>

<style>
	.top {
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 100%;
	}

	.page-section {
		text-align: center;
	}


	.icon-message {
		height: 28upx;
		width: 28upx;
		margin: 0 20upx;

	}

	.tiaojian {
		display: flex;
		flex-direction: row;
		background: #FFFFFF;
		height: 40px;
		align-items: center;
		text-align: center;
		justify-content: space-around;
	}

	.tiaojian view {
		line-height: 37px;
		color: rgba(153, 153, 153, 1);

	}

	.tiaojian .active {
		border-bottom: 3px solid #c49c5a;
		color: rgba(196, 156, 90, 1);
	}

	.product-item {
		display: flex;
		flex-direction: column;
		background: #FFFFFF;
		margin-top: 20upx;

	}

	.product-title {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;

		height: 40px;
		text-align: left;
		font-size: 15px;
		margin: 0 30upx;
	}

	.btn {
		background: #C49C5A;
		color: rgb(255, 255, 255);
		padding: 10upx 15upx;
		border-radius: 20px;
		font-size: 12px;
	}

	.yixiaxian {
		background: #CCCCCC;
	}

	.product-detail {
		padding: 20upx 0;
		display: flex;
		border-top: 1px solid rgba(238, 238, 238, 1);
		border-bottom: 1px solid rgba(238, 238, 238, 1);

	}

	.color1 {
		color: #999999;
		text-align: right;
		margin-left: 20upx;
	}

	.item {
		display: flex;
		flex-direction: row;

	}

	.item-right {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.item-left {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		border-right: 1px solid #EEEEEE;
	}

	.color {
		color: rgba(196, 156, 90, 1);

	}

	.size {
		font-size: 16px;
	}

	.large-size {
		font-size: 24px;
	}
	.item-right-inside{
		text-align: left;
	}
</style>
